import { createTopic } from '~/server/database/services/topicService'
import { TopicDomain, Difficulty, ReviewStatus, type TopicCreationAttributes } from '~/server/database/models/Topic'

// 测试题目数据
const testTopics = [
  // HTML 题目
  {
    title: 'HTML5新增的语义化标签有哪些？',
    domain: TopicDomain.HTML,
    difficulty: Difficulty.BASIC,
    standardAnswer: 'HTML5新增的语义化标签包括：<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>、<figure>、<figcaption>、<time>、<mark>、<progress>、<meter>等。这些标签让HTML结构更加清晰，有助于SEO和可访问性。',
    description: '考查HTML5语义化标签的基础知识'
  },
  {
    title: '如何实现HTML表单验证？',
    domain: TopicDomain.HTML,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'HTML表单验证可以通过以下方式实现：1. 使用HTML5内置验证属性（required、pattern、min、max等）；2. 使用JavaScript进行自定义验证；3. 结合CSS伪类选择器(:valid、:invalid)提供视觉反馈；4. 使用Constraint Validation API进行高级验证。',
    description: '考查HTML表单验证的多种实现方式'
  },
  {
    title: 'HTML中的data-*属性有什么作用？',
    domain: TopicDomain.HTML,
    difficulty: Difficulty.BASIC,
    standardAnswer: 'data-*属性是HTML5的自定义数据属性，用于存储页面或应用程序的私有自定义数据。这些属性不会影响页面的渲染，但可以通过JavaScript的dataset属性或getAttribute()方法访问。命名格式为data-*，其中*可以是任何符合HTML命名规范的小写字母。',
    description: '考查HTML自定义数据属性的使用'
  },
  {
    title: '如何优化HTML页面的加载性能？',
    domain: TopicDomain.HTML,
    difficulty: Difficulty.HARD,
    standardAnswer: 'HTML页面性能优化包括：1. 压缩HTML、CSS、JS文件；2. 使用CDN加速资源加载；3. 启用Gzip压缩；4. 优化图片格式和大小；5. 使用懒加载技术；6. 减少HTTP请求数量；7. 使用浏览器缓存；8. 优化关键渲染路径；9. 使用预加载和预连接；10. 避免阻塞渲染的资源。',
    description: '考查HTML页面性能优化的综合知识'
  },

  // JavaScript 题目
  {
    title: 'JavaScript中的闭包是什么？请举例说明',
    domain: TopicDomain.JS,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: '闭包是指有权访问另一个函数作用域中变量的函数。闭包的形成需要满足三个条件：1. 嵌套函数；2. 内部函数引用外部函数的变量；3. 外部函数返回内部函数。例如：function outer(x) { return function inner(y) { return x + y; }; } var add5 = outer(5); console.log(add5(3)); // 输出8',
    description: '考查JavaScript闭包概念和应用'
  },
  {
    title: 'JavaScript中的this指向问题',
    domain: TopicDomain.JS,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'JavaScript中this的指向取决于函数的调用方式：1. 普通函数调用：this指向全局对象（严格模式下为undefined）；2. 对象方法调用：this指向调用该方法的对象；3. 构造函数调用：this指向新创建的对象；4. call/apply/bind调用：this指向指定的对象；5. 箭头函数：this继承自外层作用域。',
    description: '考查JavaScript中this关键字的指向规则'
  },
  {
    title: 'Promise和async/await的区别',
    domain: TopicDomain.JS,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'Promise和async/await都是处理异步操作的方式：1. Promise是ES6引入的异步编程解决方案，通过.then()和.catch()处理结果；2. async/await是ES2017引入的语法糖，让异步代码看起来像同步代码；3. async函数返回Promise对象；4. await只能在async函数中使用；5. async/await提供了更好的错误处理机制。',
    description: '考查JavaScript异步编程的两种方式'
  },
  {
    title: 'JavaScript中的事件循环机制',
    domain: TopicDomain.JS,
    difficulty: Difficulty.HARD,
    standardAnswer: 'JavaScript事件循环机制：1. 调用栈执行同步代码；2. 遇到异步操作时，将其放入任务队列；3. 调用栈清空后，事件循环从任务队列中取出任务执行；4. 任务队列分为宏任务队列（setTimeout、setInterval等）和微任务队列（Promise.then、process.nextTick等）；5. 每次事件循环先执行所有微任务，再执行一个宏任务。',
    description: '考查JavaScript事件循环的深入理解'
  },

  // CSS 题目
  {
    title: 'CSS中的盒模型是什么？',
    domain: TopicDomain.CSS,
    difficulty: Difficulty.BASIC,
    standardAnswer: 'CSS盒模型是网页布局的基础概念，每个元素都被看作一个矩形盒子，包含：1. content（内容区）：实际内容；2. padding（内边距）：内容与边框之间的空间；3. border（边框）：围绕内边距的线条；4. margin（外边距）：元素与其他元素之间的空间。盒模型分为标准盒模型和IE盒模型。',
    description: '考查CSS盒模型的基础概念'
  },
  {
    title: 'CSS Flexbox布局的使用方法',
    domain: TopicDomain.CSS,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'Flexbox是CSS3的弹性布局方式：1. 容器属性：display: flex、flex-direction、justify-content、align-items、flex-wrap等；2. 项目属性：flex-grow、flex-shrink、flex-basis、align-self等；3. 主轴和交叉轴的概念；4. 适用于一维布局，如导航栏、卡片布局等；5. 可以轻松实现居中对齐、等分布局等效果。',
    description: '考查CSS Flexbox布局的掌握程度'
  },
  {
    title: 'CSS Grid布局与Flexbox的区别',
    domain: TopicDomain.CSS,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'CSS Grid和Flexbox的区别：1. Grid是二维布局系统，Flexbox是一维布局系统；2. Grid适用于复杂网格布局，Flexbox适用于组件内部布局；3. Grid可以同时控制行和列，Flexbox只能控制一个方向；4. Grid更适合页面整体布局，Flexbox更适合组件布局；5. 两者可以结合使用，Grid用于整体结构，Flexbox用于细节调整。',
    description: '考查CSS两种布局系统的区别和应用场景'
  },
  {
    title: 'CSS性能优化策略',
    domain: TopicDomain.CSS,
    difficulty: Difficulty.HARD,
    standardAnswer: 'CSS性能优化策略：1. 减少重排和重绘：避免频繁修改DOM样式；2. 使用transform和opacity进行动画；3. 合理使用CSS选择器，避免过度嵌套；4. 压缩CSS文件；5. 使用CSS预处理器减少重复代码；6. 利用CSS缓存；7. 使用CSS-in-JS或CSS Modules；8. 避免使用@import；9. 使用will-change属性优化动画性能。',
    description: '考查CSS性能优化的综合知识'
  },

  // Vue 题目
  {
    title: 'Vue.js的生命周期钩子有哪些？',
    domain: TopicDomain.VUE,
    difficulty: Difficulty.BASIC,
    standardAnswer: 'Vue.js的生命周期钩子包括：1. 创建阶段：beforeCreate、created；2. 挂载阶段：beforeMount、mounted；3. 更新阶段：beforeUpdate、updated；4. 销毁阶段：beforeDestroy、destroyed（Vue 2）或beforeUnmount、unmounted（Vue 3）；5. 错误处理：errorCaptured。每个钩子都有特定的执行时机和用途。',
    description: '考查Vue.js生命周期的基础知识'
  },
  {
    title: 'Vue.js中的响应式原理',
    domain: TopicDomain.VUE,
    difficulty: Difficulty.HARD,
    standardAnswer: 'Vue.js的响应式原理：1. Vue 2使用Object.defineProperty劫持对象属性，通过getter/setter实现响应式；2. Vue 3使用Proxy代理整个对象，性能更好；3. 依赖收集：在getter中收集依赖（Watcher）；4. 派发更新：在setter中通知所有依赖更新；5. 异步更新：使用nextTick确保DOM更新完成；6. 数组的特殊处理：重写数组的变异方法。',
    description: '考查Vue.js响应式系统的深入理解'
  },
  {
    title: 'Vuex状态管理的核心概念',
    domain: TopicDomain.VUE,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'Vuex的核心概念：1. State：存储应用状态；2. Getters：从state中派生出新状态；3. Mutations：同步修改state的唯一方式；4. Actions：异步操作，通过commit调用mutations；5. Modules：将store分割成模块；6. 单向数据流：View -> Actions -> Mutations -> State -> View；7. 严格模式：确保状态变更只能通过mutations进行。',
    description: '考查Vuex状态管理的掌握程度'
  },
  {
    title: 'Vue 3 Composition API的优势',
    domain: TopicDomain.VUE,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'Vue 3 Composition API的优势：1. 更好的逻辑复用：通过composables函数复用逻辑；2. 更好的类型推导：TypeScript支持更完善；3. 更灵活的代码组织：相关逻辑可以组织在一起；4. 更小的包体积：tree-shaking更友好；5. 更好的性能：setup函数只执行一次；6. 更直观的响应式API：ref、reactive等。',
    description: '考查Vue 3 Composition API的理解'
  },

  // 工程化 题目
  {
    title: 'Webpack的核心概念和配置',
    domain: TopicDomain.ENGINEERING,
    difficulty: Difficulty.MEDIUM,
    standardAnswer: 'Webpack的核心概念：1. Entry：入口文件；2. Output：输出配置；3. Loaders：处理非JavaScript文件；4. Plugins：扩展功能；5. Mode：开发/生产模式；6. DevServer：开发服务器配置；7. 代码分割：optimization.splitChunks；8. 热更新：HMR配置；9. 环境变量：DefinePlugin；10. 性能优化：压缩、缓存等。',
    description: '考查Webpack构建工具的使用'
  },
  {
    title: '前端性能监控和优化策略',
    domain: TopicDomain.ENGINEERING,
    difficulty: Difficulty.HARD,
    standardAnswer: '前端性能监控和优化：1. 性能指标：FCP、LCP、FID、CLS等；2. 监控工具：Lighthouse、WebPageTest、Chrome DevTools；3. 优化策略：代码分割、懒加载、预加载、缓存策略、CDN使用、图片优化、字体优化；4. 性能预算：设置性能阈值；5. 持续监控：集成到CI/CD流程；6. 用户体验：关注真实用户性能数据。',
    description: '考查前端性能优化的综合能力'
  },
  {
    title: '前端安全防护措施',
    domain: TopicDomain.ENGINEERING,
    difficulty: Difficulty.HARD,
    standardAnswer: '前端安全防护措施：1. XSS防护：输入验证、输出编码、CSP策略；2. CSRF防护：CSRF Token、SameSite Cookie；3. 点击劫持：X-Frame-Options、CSP frame-ancestors；4. 内容安全：HTTPS、HSTS、证书固定；5. 依赖安全：定期更新依赖、漏洞扫描；6. 代码安全：避免eval、innerHTML等危险操作；7. 敏感信息：不在前端存储敏感数据。',
    description: '考查前端安全防护的综合知识'
  },
  {
    title: '微前端架构的实现方案',
    domain: TopicDomain.ENGINEERING,
    difficulty: Difficulty.HARD,
    standardAnswer: '微前端架构实现方案：1. 单SPA：通过路由分发不同应用；2. Module Federation：Webpack 5的模块联邦；3. qiankun：基于single-spa的微前端框架；4. iframe：简单但隔离性好的方案；5. Web Components：原生组件化方案；6. 关键技术：应用隔离、样式隔离、状态管理、通信机制、部署策略；7. 适用场景：大型团队、技术栈多样化、独立部署需求。',
    description: '考查微前端架构的设计和实现'
  }
]

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event)
    const { count = 20, submitterId = 1 } = body

    if (!submitterId) {
      throw createError({
        statusCode: 400,
        statusMessage: '缺少submitterId参数'
      })
    }

    const createdTopics = []
    const topicsToCreate = testTopics.slice(0, Math.min(count, testTopics.length))

    for (const topicData of topicsToCreate) {
      // 随机设置审核状态
      const reviewStatuses = [ReviewStatus.PENDING, ReviewStatus.APPROVED, ReviewStatus.REJECTED]
      const randomStatus = reviewStatuses[Math.floor(Math.random() * reviewStatuses.length)]
      
      // 随机设置收藏数量
      const randomStarCount = Math.floor(Math.random() * 100)

      const topic = await createTopic({
        ...topicData,
        submitterId: parseInt(submitterId),
        reviewStatus: randomStatus,
        starCount: randomStarCount
      } as TopicCreationAttributes)

      createdTopics.push(topic)
    }

    return {
      success: true,
      data: {
        topics: createdTopics,
        count: createdTopics.length
      },
      message: `成功创建 ${createdTopics.length} 道测试题目`
    }
  } catch (error) {
    console.error('生成测试数据失败:', error)
    
    if (error && typeof error === 'object' && 'statusCode' in error) {
      throw error
    }
    
    throw createError({
      statusCode: 500,
      statusMessage: '生成测试数据失败'
    })
  }
})
